<template>
  <div class="app-container groupDetail">
    <el-card class="margin-bottom-15">
      <el-descriptions title="基本信息" :column="2" border>
        <el-descriptions-item label="组合名称">{{ baseinfo.groupName }}</el-descriptions-item>
        <el-descriptions-item label="所属部门">
          <treeselect v-model="baseinfo.deptId" :options="deptOptions" :show-count="true" disabled style="width: 300px"/>
        </el-descriptions-item>
        <el-descriptions-item label="备注">{{ baseinfo.bz }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <el-card class="margin-bottom-15">
      <el-descriptions title="设备绑定" border></el-descriptions>
      <el-table
        v-loading="loading"
        :data="bindDeviceList"
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          label="设备名称"
          prop="name"
        ></el-table-column>
        <el-table-column
          label="设备编号"
          align="center"
          prop="id"
          :show-overflow-tooltip="true"
        ></el-table-column>
        <el-table-column
          label="备注"
          align="center"
          prop="bz"
          :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getGroup } from "@/api/wrj/group";export default {
  name: 'groupDetail',
  data() {
    return {
      baseinfo: {},
      loading: false,
      bindDeviceList: [],
      deptOptions: undefined,
    }
  },
  components: {
    Treeselect
  },
  mounted() {
    this.getTreeselect();
    if (this.$route.query.id) {
      this.getGroup();
    }
  },
  methods: {
    // 获取组合设备基本信息
    getGroup() {
      getGroup(this.$route.query.id).then(res => {
        console.log(res)
        if(res.code == 200) {
          this.baseinfo.id = res.data.id;
          this.baseinfo.deptId = res.data.deptId;
          this.baseinfo.bz = res.data.bz;
          this.baseinfo.groupName = res.data.groupName;
          this.bindDeviceList = res.data.deviceList
        }
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.groupDetail {
  width: 100%;

  .margin-bottom-15 {
    margin-bottom: 15px;
  }
}
</style>

<style>
  .groupDetail .vue-treeselect__control {
    border: none !important;
    background-color: #fff !important;
  }
  .groupDetail .vue-treeselect svg {
    color: #fff !important;
  }
</style>